<template>
  <div class='xwzx'>
    <div class="banner">
      <img :src = 'bannerImg'>
    </div>
    <div class="content">
      <ul class="tab">
        <li v-for='(item,index) in tab' @click='active(item, index)' :key='index'>
          <span :class='index==activeSty?"activeSty":""'>{{item.title}}</span>
        </li>
      </ul>
      <div class="xwzx">
        <h2>企业新闻</h2>
        <h3>Corporate News</h3>
        <ul class='xwzxList'>
          <li v-for='(item,index) in xwzx' :key='index' :class='item'>
            <div class='list'>
              <div class="left">
                <img :src='item.img'>
              </div>
              <div class="right">
                <p><span>{{item.time.split('-')[1]}}-{{item.time.split('-')[2]}}</span>/<span>{{item.time.split('-')[0]}}</span></p>
                <p>{{item.title}}</p>
                <p>{{item.text}}</p>
              </div>
            </div>
          </li>
        </ul>
        <el-pagination background layout="prev, pager, next" :page-size="6" :total="54"></el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Xwzx',
  data () {
    return {
      bannerImg: require('../assets/images/xwzxBanner.png'),
      activeName: 'first',
      activeSty: 0,
      tab: [
        {
          title: '企业新闻',
          code: 'qyxw'
        },
        {
          title: '行业资讯',
          code: 'qyxw'
        }
      ],
      xwzx: [
        {
          time: '2016-9-24',
          img: require('../assets/images/xw01.png'),
          title: '昆特科技参加第15届中国防汛抗旱',
          text: '昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。'
        },
        {
          time: '2016-9-24',
          img: require('../assets/images/xw02.png'),
          title: '昆特科技参加第15届中国',
          text: '昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。'
        },
        {
          time: '2016-9-24',
          img: require('../assets/images/xw03.png'),
          title: '昆特科技参加第15届中国防汛抗旱',
          text: '昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。'
        },
        {
          time: '2016-9-24',
          img: require('../assets/images/xw04.png'),
          title: '昆特科技参加第15届中国',
          text: '昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。'
        },
        {
          time: '2016-9-24',
          img: require('../assets/images/xw05.png'),
          title: '昆特科技参加第15届中国防汛抗旱',
          text: '昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。'
        },
        {
          time: '2016-9-24',
          img: require('../assets/images/xw06.png'),
          title: '昆特科技参加第15届中国',
          text: '昆特科技向东盟海内外客户展示了我司自主研发的第一代生态监测站。悦农通事业部也展示了其核心产品平台，重点推介了特色农业气象服务平台，农业金融平台，负氧离子监测仪，智慧农业服务系统，设施农业气象服务平台。'
        }
      ]
    }
  },
  methods: {
    active (item, index) {
      this.activeSty = index
    }
  }
}
</script>
<style lang="less" scoped>
.xwzx{
  .banner{
    width: 100%;
    min-width: 1200px;
    img{
      width: 100%;
    }
  }
  .content{
    width: 1200px;
    margin: 0 auto;
    .tab{
      overflow: hidden;;
      width: 240px;
      margin: 70px auto;
      li{
        float: left;
        cursor: pointer;
        margin-right: 20px;
        &:last-of-type{
          margin-right: 0;
        }
        span{
          padding: 10px 15px;
          display: block;
          font-size: 20px;
          font-weight: Medium;
          color: #666666;
          &.activeSty{
            background:linear-gradient(0deg,rgba(32,166,196,1),rgba(126,213,233,1));
            box-shadow:0px 2px 13px 2px rgba(15,87,104,0.06);
            border-radius:20px;
            color: #ffffff;
          }
        }
      }
    }
    .xwzx{
      h2{
        text-align: center;
        font-size:52px;
        font-family:Lato-Light;
        font-weight:300;
        color:rgba(51,51,51,1);
        line-height:52px;
      }
      h3{
        text-align: center;
        font-size:24px;
        font-family:PingFang-SC-Medium;
        font-weight:500;
        color:rgba(153,153,153,1);
        line-height:60px;
        // letter-spacing: 80px;
        // padding-left: 80px;
      }
      .xwzxList{
        // overflow: hidden;
        height: 1200px;
        border-bottom: solid #eeeeee 1px;
        li{
          position: relative;
          width: 600px;
          height: 330px;
          float: left;
          margin-top: 50px;
          &:nth-of-type(even){
            float: right;
          }
          .list{
            position: absolute;
            left: 0;
            top: 0;
            padding: 18px;
            overflow: hidden;
            width: 564px;
            &:hover{
              box-shadow:0px 2px 13px 2px rgba(2,10,12,0.06);
              border-radius:10px;
              transform: scale(1.02);
              z-index: 80;
            }
            .left{
              float: left;
              width:203px;
              height:280px;
              border-radius: 10px;
            }
            .right{
              width:326px;
              float: left;
              margin-left: 30px;
              p{
                &:first-of-type{
                  font-size: 24px;
                  color: #d3d3d3;
                  line-height: 28px;
                  border-bottom: #eeeeee solid 1px;
                  padding-bottom: 20px;
                  span{
                    vertical-align: -4px;
                    &:first-of-type{
                      font-size: 28px;
                      color: #333333;
                      padding-right: 30px;
                    }
                    &:last-of-type{
                      font-size: 24px;
                      color: #999999;
                      float: right;
                    }
                  }
                }
                &:nth-of-type(2){
                  line-height: 78px;
                  height: 78px;
                  font-size: 24px;
                  font-weight: bold;
                  color: #333333;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 1;
                  overflow: hidden;
                }
                &:nth-of-type(3){
                  height: 150px;
                  font-size: 14px;
                  line-height: 30px;
                  color: #666666;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 5;
                  overflow: hidden;
                }
              }
            }
          }
        }
      }
      /deep/.el-pagination{
        margin: 50px auto 80px;
        width: 400px;
        .el-pager{
          li{
            background: #ffffff;
            border: 1px solid #d3d3d3;
            color: #666666;
            margin: 0 0 0 15px;
            min-width: 25px;
            min-height: 25px;
            &.active{
              background:linear-gradient(45deg,rgba(32,166,196,1),rgba(126,213,233,1));
              color: #ffffff;
              border: none;
            }
          }
        }
        .btn-next{
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
